<template>
  <svg>
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'">
      <g>
        <circle cx="32" cy="32" r="30" fill="none" stroke="#FB819D" stroke-width="3"/>
        <line x1="32" y1="32" x2="32" y2="14" stroke="#FB819D" stroke-width="3"></line>
        <line x1="32" y1="32" x2="17" y2="44" stroke="#FB819D" stroke-width="3"></line>
        <line x1="32" y1="32" x2="47" y2="44" stroke="#FB819D" stroke-width="3"></line>
      </g>
      <g>
        <circle cx="32" cy="82" r="30" fill="none" stroke="#CFD264" stroke-width="3"/>
        <polygon points="17,72 47,72 32,95" fill="none" stroke="#CFD264" stroke-width="3"></polygon>
      </g>
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="less" scoped>
</style>